<template>
  <view class="viewpoint">
    <!-- logo -->
    <scroll-view scroll-y>
      <view class="logo-box">
        <view class="logo">
          <image
            src="http://smzacc0p8.hn-bkt.clouddn.com/logo.png"
            mode="scaleToFill"
          />
        </view>
        <view class="text"> 点击你想预约的教学楼吧 </view>
      </view>
      <view class="building-box">
        <view
          class="building-item"
          @tap="toBuilding(item)"
          v-for="item in buildings"
          :key="item"
        >
          {{ item }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { onLoad, onTabItemTap } from "@dcloudio/uni-app";
import { building } from "../../utils/booking";
const buildings = ref([]);
const getBuilding = async () => {
  const res = await building();
  if (res?.data?.code === 200) {
    buildings.value = res?.data?.data;
  }
};
const toBuilding = (item) => {
  uni.navigateTo({ url: `/pageA/building/building?building=${item}` });
};
onLoad(() => {
  getBuilding();
});
onTabItemTap(() => {
  getBuilding();
});
</script>

<style  lang="scss">
page {
  height: 100%;
  // background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
}
.viewpoint {
  height: 100%;
  box-sizing: border-box;
  padding: 10rpx 15rpx;
  .logo-box {
    width: 100%;
    height: 100rpx;
    display: flex;
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
    .logo {
      width: 100rpx;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      font-size: 30rpx;
      color: #000;
      height: 100%;
      line-height: 100rpx;
      margin-left: 10rpx;
      font-size: 36rpx;
      font-weight: bold;
      font-family: "SimSun", "宋体", "Arial", sans-serif;
    }
  }
  .building-box {
    .building-item {
      width: 100%;
      height: 120rpx;
      border-radius: 15rpx;
      background-color: #cff2a2;
      margin-bottom: 15rpx;
      border: #cac6c6 solid 1rpx;
      text-align: center;
      line-height: 120rpx;
      font-size: 36rpx;
      font-weight: bold;
    }
  }
}
</style>
